<template>
  <div class="overview-card-container">
    <el-card
      class="overview-card"
      body-class="overview-card-body"
      shadow="hover"
      @click="() => router.push('/gamemanage/gamelist')"
    >
      <el-icon size="70">
        <gameIcon />
      </el-icon>
      <el-statistic title="游戏总数" :value="gameCountValue" />
    </el-card>
    <el-card
      class="overview-card"
      body-class="overview-card-body"
      shadow="hover"
      @click="() => router.push('/clientmanage/usermanage')"
    >
      <el-icon size="70" color="#409eff">
        <User />
      </el-icon>
      <el-statistic title="总用户数" :value="userCountValue" />
    </el-card>
    <el-card
      class="overview-card"
      body-class="overview-card-body"
      shadow="hover"
      @click="() => router.push('/ordermanage')"
    >
      <el-icon size="70" color="#f56c6c">
        <ShoppingCart />
      </el-icon>
      <el-statistic title="总订单数" :value="orderCountValue" />
    </el-card>
    <el-card
      class="overview-card"
      body-class="overview-card-body"
      shadow="hover"
      @click="() => router.push('/postmanage/postlist')"
    >
      <el-icon size="70" color="#67c23a">
        <Checked />
      </el-icon>
      <el-statistic title="总帖子数" :value="postCountValue" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { useTransition } from "@vueuse/core";
import gameIcon from "@/assets/svg/gameListIcon.svg";
import router from "@/router";

const props = defineProps({
  userCount: {
    type: Number,
    default: 0,
  },
  gameCount: {
    type: Number,
    default: 0,
  },
  postCount: {
    type: Number,
    default: 0,
  },
});

const gameCount = computed(() => props.gameCount);
const userCount = computed(() => props.userCount);
const orderCount = ref(0);
const postCount = computed(() => props.postCount);
const gameCountValue = useTransition(gameCount, {
  duration: 1500,
});

const userCountValue = useTransition(userCount, {
  duration: 1500,
});

const orderCountValue = useTransition(orderCount, {
  duration: 1500,
});

const postCountValue = useTransition(postCount, {
  duration: 1500,
});

onMounted(() => {
  orderCount.value = 1000000;
});
</script>

<style>
.overview-card-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
  cursor: pointer;
}
.overview-card {
  width: 24%;
}
.overview-card-body {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>
